<style scoped lang="less">
</style>
<template>
	<div>
		<Row>
			<Col span="24">
				<Card style="margin-bottom: 10px">
					<Form inline>
						<FormItem style="margin-bottom: 0">
							<Select v-model="searchConf.status" clearable placeholder="请选择状态" style="width:100px">
								<Option v-for="item in statusList" :value="item.value">{{item.name}}</Option>
							</Select>
						</FormItem>
						<FormItem style="margin-bottom: 0">
							<Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
						</FormItem>
					</Form>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span="24">
				<Card>
					<div>
						<Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
					</div>
					<div class="margin-top-15" style="text-align: center">
						<Page :total="tableShow.listCount" :current="tableShow.currentPage"
						      :page-size="tableShow.pageSize" @on-change="changePage"
						      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
					</div>
				</Card>
			</Col>
		</Row>
	</div>
</template>
<script>
  //0待提现 5已提现 10关闭
  const STATUS_UN_OP = 0;
  const STATUS_FINISH = 5;
  const STATUS_CLOSE = 10;
  import {getList, close, finish} from '@/api/withdrawals'
  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要关闭这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          currentRow.loading = true;
          close(currentRow.id).then(response => {
            currentRow.loading = false
            vm.getList();
            vm.$Message.success(response.data.msg)
          },error=>{
            currentRow.loading = false
          });
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'error',
          placement: 'top',
          loading: currentRow.loading
        }
      }, '关闭')
    ])
  };
  const finishButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '确认完成吗?',
        transfer: true
      },
      on: {
        'on-ok': () => {
          currentRow.loading = true;
          finish(currentRow.id).then(response => {
            currentRow.loading = false
            vm.getList();
            vm.$Message.success(response.data.msg)
          },error=>{
            currentRow.loading = false
          });

        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          size: 'small',
          type: 'primary',
          placement: 'top',
          loading: currentRow.loading
        }
      }, '标记完成')
    ])
  };

  let _this = null;

  export default {
    name: 'complain-list',
    data() {
      return {
        statusList: [{name: '待处理', value: STATUS_UN_OP}, {name: '已完成', value: STATUS_FINISH}, {
          name: '已关闭',
          value: STATUS_CLOSE
        }],
        show: false,
        loading: false,
        id: -1,
        itemData: null,
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '编号',
            align: 'center',
            key: 'id',
            width: 180
          },
          {
            title: '微信号',
            align: 'center',
            key: 'wx_no',
            width: 180
          },

          {
            title: '金额',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.money/100)
            },
            width: 220
          },
          {
            title: '创建日期',
            align: 'center',
            key: 'create_time',
            width: 180
          },
          {
            title: '状态',
            align: 'center',
            render: (h, params) => {
              return h('span', _this.getStatusStr(params.row.status))
            },
            width: 100
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', params.row.status===STATUS_UN_OP?[
                finishButton(_this, h, params.row, params.index),
                deleteButton(_this, h, params.row, params.index)
              ]:'')
            }
          }
        ],
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          status: null
        },
      }
    },
    created() {
      _this = this;
      this.getList()

    },
    methods: {
      getStatusStr(status) {
        let str = '';
        if (status === STATUS_CLOSE) {
          str = '已关闭';
        } else if (status === STATUS_UN_OP) {
          str = '待处理';
        } else if (status === STATUS_FINISH) {
          str = '已完成';
        }
        return str;
      },
      changePage(page) {
        this.tableShow.currentPage = page;
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size;
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1;
        this.getList()
      },
      getList() {
        let vm = this;
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          status: vm.searchConf.status
        };
        getList(params).then(response => {
          if (response.data.data.list != null) {
            response.data.data.list.forEach(v => {
              if (v.imgs != null) {
                v.imgs = JSON.parse(v.imgs);
              }
            });
            vm.tableData = response.data.data.list
          } else {
            vm.tableData = [];
          }

          vm.tableShow.listCount = response.data.data.count
        })
      }
    }
  }
</script>
